@extends('users.layouts')

@section('css')
    <style>
        .chat-box {
            width: 80%;
            border: 1px solid #ccc;
            margin: 100px auto;
        }
    </style>
@stop

@section('js')
    <script src="{{ asset('/js/chat/room.js') }}"></script>
@stop

@section('contents')
    <div class="chat-box">
        <el-row :gutter="10">
            <el-col :span="24">
                <el-card class="box-card" style="min-height: 500px;">
                    <div slot="header" class="clearfix">
                        <el-button type="text">聊天窗口</el-button>
                    </div>

                    <div>

                        <div id="message" style="border:  solid 1px #ccc;margin-top: 10px;height: 300px;overflow-y: scroll;">
                            <el-row v-for="record in recordData" style="margin: 5px 0px;">
                                <el-col :span="1" style="margin-left: 5px;">
                                    <el-link type="primary" :icon="record.uid === fid ? 'el-icon-user-solid' : 'el-icon-user'"></el-link>

                                </el-col>
                                <el-col :span="12">
                                    <el-tag :type="record.uid === fid ? 'success' : 'info'">@{{ record.message }}</el-tag>
                                </el-col>
<!--                                <el-col :span="8">
                                    @{{ record.created_at }}
                                </el-col>-->
                            </el-row>
                        </div>
                        <el-row :gutter="10" style="margin-top: 50px;">
                            <el-col :span="12">
                                <el-input type="text" name="message" v-model="message"></el-input>
                            </el-col>
                            <el-col :span="12">
                                <el-button type="primary" @click="sendMessage">发送</el-button>
                            </el-col>
                        </el-row>
                    </div>
                </el-card>
            </el-col>

        </el-row>
    </div>
@stop
